import React, { Component } from 'react';
import ImageViewer from 'react-native-image-zoom-viewer';

import {
    StyleSheet,
    Text,
    View,
    StatusBar,
    Image,
    ScrollView,
    TouchableHighlight,
    TouchableOpacity,
    SafeAreaView,
    Modal,
    Platform
} from 'react-native';
import StatusBarSelf from '../StatusBarSelf';
import Constant from '../../utils/Constant'

import AndroidModule from "../../utils/AndroidConnent";

const isIos = Platform.OS == 'ios';

export default class BigImageContainer extends Component {

    constructor(props) {
        super(props)
        this.state = {
            idx: this.props.idx || 0,//初始展示第几张
            images: this.props.images,
        }
    }

    render() {
        console.log('images = ',this.state.images)
        return (
            <View style={styles.container}>
                <StatusBarSelf color={'#000'}/>
                <ImageViewer
                    isShowMenu={true}
                    imageUrls={this.state.images} // 照片路径
                    menuContext={{ saveToLocal: '保存到相册', cancel: '取消' }}
                    saveToLocalByLongPress={true}
                    onSave={(url) => {
                        console.log('保存到相册',url);
                        AndroidModule.downloadPictures({ imgList: [url] })
                    }}
                    index={this.state.idx}
                    pageAnimateTime={200}
                    onClick={() => { // 图片单击事件
                        if (this.props.closeHandler) {
                            this.props.closeHandler(this.state.idx)
                        }
                    }}
                    menus={({ cancel, saveToLocal }) => (
                        <View style={[styles.bottomBox, { paddingBottom: Constant.bottomHeight }]}>
                            <TouchableOpacity
                                style={styles.bottomItemBox}
                                onPress={saveToLocal}
                                activeOpacity={0.8}
                            >
                                <Text style={styles.bottomText}>保存图片</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={[styles.bottomItemBox, { borderBottomWidth: 0 }]}
                                onPress={cancel}
                                activeOpacity={0.8}
                            >
                                <Text style={styles.bottomText}>关闭</Text>
                            </TouchableOpacity>
                            
                        </View>
                    )}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        zIndex: 1001,
        width: '100%',
        height: '100%',
        backgroundColor: '#000000'
    },
    ImageBox: {
        flex: 1,
    },
    img: {
        width: 750 * sREM,
        height: 562.5 * sREM,
        marginTop: 235 * sREM
    },
    bottomBox: {
        position: 'absolute',
        bottom: 0,
        flexDirection: 'column',
        width: '100%',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    bottomItemBox: {
        height: 50,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 0.5,
    },
    bottomText: {
        fontSize: 15,
        color: '#333'
    }
})